<template>
  <div class="flex h-full px-3">
    <div class="w-[250px] flex items-center pl-[3%]">
      <avatar :src="audioStore.currentPlay?.picUrl" @click="handleAvatar"></avatar>

      <div class="ml-5 flex flex-col mr-4 cursor-pointer">
        <div class="w-full song_name">
          {{ audioStore.currentPlay?.name }}
        </div>
        <div class="text-sm text-gray-400">{{ audioStore.currentPlay?.song?.artists[0].name }}</div>
      </div>

      <span class="iconfont icon-aixin"></span>
    </div>

    <div class="flex-1 flex-col flex items-center just h-full justify-center">
      <div class="w-full flex items-center">
        <span class="text-sm">{{ currentTime }}</span>
        <lt-progress
          v-model="currentProgress"
          :max="formatTimeToSeconds(duration)"
          :min="0"
          :show-tooltip="false"
          class="mx-3"
          @change="handleProgressChange"
        ></lt-progress>
        <span class="text-sm">{{ duration }}</span>
      </div>
    </div>
    <div class="w-[300px] flex items-center justify-evenly">
      <div class="flex items-center">
        <span
          class="text-2xl iconfont icon-diyiyeshouyeshangyishou prev"
          @click="audioStore.prev()"
        ></span>
        <span
          v-if="isPlay"
          class="text-3xl iconfont icon-zanting mx-4 big-icon"
          @click="setPlayStatus('pause')"
        ></span>
        <span
          v-else
          class="text-3xl iconfont icon-bofang mx-4 big-icon"
          @click="setPlayStatus('play')"
        ></span>
        <span
          class="text-2xl iconfont icon-zuihouyiyemoyexiayishou next"
          @click="audioStore.next()"
        ></span>
      </div>
      <span class="iconfont icon-shengyin1"></span>
      <span class="iconfont icon-xiazai"></span>
      <span class="iconfont icon-liebiao" @click="openPlayList"></span>
    </div>

    <!-- 音乐播放器   -->
    <audio
      ref="audioRef"
      @durationchange="durationchange"
      @ended="ended"
      @timeupdate="handleTimeUpdate"
    ></audio>

    <!--  播放列表  -->
    <play-list-drawer ref="playListDrawerRef"></play-list-drawer>

    <!--  歌词弹层  -->
    <lyric-drawer ref="lyricDrawerRef"></lyric-drawer>
  </div>
</template>
<script setup>
import { ref, useTemplateRef, watch, onMounted } from 'vue'
import { formatTimeToSeconds, getSongPlayUrl } from '../../utils/common-fn'
import playListDrawer from './components/play-list-drawer.vue'
import avatar from '../../base-ui/avatar/index.vue'
import ltProgress from '../../base-ui/lt-progress/index.vue'
import lyricDrawer from './components/lyric-drawer.vue'

const currentProgress = ref()
import useAudio from '../../store/modules/audio-data'
import { formatTime } from '../../utils/common-fn'

const audioStore = useAudio()
const audioRef = useTemplateRef('audioRef')
const isPlay = ref(false)
const duration = ref(formatTime(0))
const currentTime = ref(formatTime(0))
const isFirstLoad = ref(true)

onMounted(() => {
  audioStore.initAudio()
})

// 音乐改变自动播放
watch(
  () => audioStore.currentPlay,
  (newValue) => {
    audioRef.value.src = getSongPlayUrl(newValue.id)
    if (isFirstLoad.value) {
      isFirstLoad.value = false
      return
    }
    audioRef.value.play()
    isPlay.value = true
  }
)

// 播放列表
const playListDrawerRef = useTemplateRef('playListDrawerRef')
const openPlayList = () => {
  console.log(playListDrawerRef.value)
  playListDrawerRef.value.open()
}

// 播放音乐相关的事件
const durationchange = () => {
  duration.value = formatTime(audioRef.value.duration)
}
const handleTimeUpdate = () => {
  currentProgress.value = Math.floor(audioRef.value.currentTime)
  currentTime.value = formatTime(Math.floor(audioRef.value.currentTime))
}
const handleProgressChange = (value) => {
  audioRef.value.currentTime = value
}
const ended = () => {
  audioStore.next()
}

const setPlayStatus = (type) => {
  if (!audioStore.currentPlay) return
  if (type === 'play') {
    audioRef.value.play()
    isPlay.value = true
  } else {
    audioRef.value.pause()
    isPlay.value = false
  }
}

const lyricDrawerRef = useTemplateRef('lyricDrawerRef')
const handleAvatar = () => {
  console.log(1)
  lyricDrawerRef.value.open()
}
</script>

<style scoped>
.song_name {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.big-icon {
  font-size: 28px !important;
}

.prev,
.next {
  font-size: 22px !important;
}
</style>
